<template>
	<view>
		<swiper class="swiper" @change="swiperChange" circular :indicator-dots="indicatorDots" :duration="0" :disable-touch="true" :touchable="false" :current="current" easing-function="easeOutCubic">
			<swiper-item @touchmove.stop="stopTouchMove">
				<view class="swiper-item">
					<image class="iwidth" :src="imgPath+'/static/big/pic/question1.png'" mode="heightFix"></image>
					<image class="a1" :class="{rightFly:current==0}" @click="answerTap('A',0)" :src="imgPath+'/static/big/pic/1A.png'" mode="widthFix"></image>
					<image class="b1" :class="{leftFly:current==0}" @click="answerTap('B',0)" :src="imgPath+'/static/big/pic/1B.png'" mode="widthFix"></image>
				</view>
			</swiper-item>
			<swiper-item @touchmove.stop="stopTouchMove">
				<view class="swiper-item">
					<image class="iwidth" :src="imgPath+'/static/big/pic/question2.png'" mode="heightFix"></image>
					<image class="a2" :class="{upFly:current==1}" @click="answerTap('A',1)" :src="imgPath+'/static/big/pic/2A.png'" mode="widthFix"></image>
					<image class="b2" :class="{downFly:current==1}" @click="answerTap('B',1)" :src="imgPath+'/static/big/pic/2B.png'" mode="widthFix"></image>
				</view>
			</swiper-item>
			<swiper-item @touchmove.stop="stopTouchMove">
				<view class="swiper-item">
					<image class="iwidth" :src="imgPath+'/static/big/pic/question3.png'" mode="heightFix"></image>
					<image class="a3" :class="{upFlyIn:current==2}" @click="answerTap('A',2)" :src="imgPath+'/static/big/pic/3A.png'" mode="widthFix"></image>
					<image class="b3" :class="{upFlyIn:current==2}" @click="answerTap('B',2)" :src="imgPath+'/static/big/pic/3B.png'" mode="widthFix"></image>
				</view>
			</swiper-item>
			<swiper-item @touchmove.stop="stopTouchMove">
				<view class="swiper-item">
					<image class="iwidth" :src="imgPath+'/static/big/pic/question4.png'" mode="heightFix"></image>
					<image class="a4" :class="{rightFly:current==3}" @click="answerTap('A',3)" :src="imgPath+'/static/big/pic/4A.png'" mode="widthFix"></image>
					<image class="b4" :class="{leftFly:current==3}" @click="answerTap('B',3)" :src="imgPath+'/static/big/pic/4B.png'" mode="widthFix"></image>
				</view>
			</swiper-item>
			<swiper-item @touchmove.stop="stopTouchMove">
				<view class="swiper-item">
					<image class="iwidth" :src="imgPath+'/static/big/pic/question5.png'" mode="heightFix"></image>
					<image class="a5" :class="{upFly:current==4}" @click="answerTap('A',4)" :src="imgPath+'/static/big/pic/5A.png'" mode="widthFix"></image>
					<image class="b5" :class="{downFly:current==4}" @click="answerTap('B',4)" :src="imgPath+'/static/big/pic/5B.png'" mode="widthFix"></image>
				</view>
			</swiper-item>
			<swiper-item @touchmove.stop="stopTouchMove">
				<view class="swiper-item">
					<image class="iwidth" :src="imgPath+'/static/big/pic/question6.png'" mode="heightFix"></image>
					<image class="a6" :class="{upFlyIn:current==5}" @click="answerTap('A',5)" :src="imgPath+'/static/big/pic/6A.png'" mode="widthFix"></image>
					<image class="b6" :class="{upFlyIn:current==5}" @click="answerTap('B',5)" :src="imgPath+'/static/big/pic/6B.png'" mode="widthFix"></image>
				</view>
			</swiper-item>
			<swiper-item @touchmove.stop="stopTouchMove">
				<view class="swiper-item">
					<image class="iwidth" :src="imgPath+'/static/big/pic/question7.png'" mode="heightFix"></image>
					<image class="a7" :class="{rightFly:current==6}" @click="answerTap('A',6)" :src="imgPath+'/static/big/pic/7A.png'" mode="widthFix"></image>
					<image class="b7" :class="{leftFly:current==6}" @click="answerTap('B',6)" :src="imgPath+'/static/big/pic/7B.png'" mode="widthFix"></image>
				</view>
			</swiper-item>
			<swiper-item @touchmove.stop="stopTouchMove">
				<view class="swiper-item">
					<image class="iwidth" :src="imgPath+'/static/big/pic/question8.png'" mode="heightFix"></image>
					<image class="a8" :class="{upFly:current==7}" @click="answerTap('A',7)" :src="imgPath+'/static/big/pic/8A.png'" mode="widthFix"></image>
					<image class="b8" :class="{downFly:current==7}" @click="answerTap('B',7)" :src="imgPath+'/static/big/pic/8B.png'" mode="widthFix"></image>
				</view>
			</swiper-item>
			<swiper-item @touchmove.stop="stopTouchMove">
				<view class="swiper-item">
					<image class="iwidth" :src="imgPath+'/static/big/pic/question9.png'" mode="heightFix"></image>
					<image class="a9" :class="{upFlyIn:current==8}" @click="answerTap('A',8)" :src="imgPath+'/static/big/pic/9A.png'" mode="widthFix"></image>
					<image class="b9" :class="{upFlyIn:current==8}" @click="answerTap('B',8)" :src="imgPath+'/static/big/pic/9B.png'" mode="widthFix"></image>
				</view>
			</swiper-item>
			<swiper-item @touchmove.stop="stopTouchMove">
				<view class="swiper-item">
					<image class="iwidth" :src="imgPath+'/static/big/pic/question10.png'" mode="heightFix"></image>
					<image class="a10" :class="{rightFly:current==9}" @click="answerTap('A',9)" :src="imgPath+'/static/big/pic/10A.png'" mode="widthFix"></image>
					<image class="b10" :class="{leftFly:current==9}" @click="answerTap('B',9)" :src="imgPath+'/static/big/pic/10B.png'" mode="widthFix"></image>
				</view>
			</swiper-item>
			<swiper-item @touchmove.stop="stopTouchMove">
				<view class="swiper-item">
					<image class="iwidth" :src="imgPath+'/static/big/pic/question11.png'" mode="heightFix"></image>
					<image class="a11" :class="{upFly:current==10}" @click="answerTap('A',10)" :src="imgPath+'/static/big/pic/11A.png'" mode="widthFix"></image>
					<image class="b11" :class="{downFly:current==10}" @click="answerTap('B',10)" :src="imgPath+'/static/big/pic/11B.png'" mode="widthFix"></image>
				</view>
			</swiper-item>
			<swiper-item @touchmove.stop="stopTouchMove">
				<view class="swiper-item">
					<image class="iwidth" :src="imgPath+'/static/big/pic/question12.png'" mode="heightFix"></image>
					<image class="a12" :class="{upFlyIn:current==11}" @click="answerTap('A',11)" :src="imgPath+'/static/big/pic/12A.png'" mode="widthFix"></image>
					<image class="b12" :class="{upFlyIn:current==11}" @click="answerTap('B',11)" :src="imgPath+'/static/big/pic/12B.png'" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<BgMusic ref="bgMusic"/>
	</view>
</template>

<script>
	export default {
		components:{
		},
		data() {
			return {
				indicatorDots: false,
				duration: 200,
				current: 0,
				answerlist: [],
				disabled: true,
			}
		},
		onLoad(options) {
			wx.hideHomeButton&&wx.hideHomeButton();
		},
		methods: {
			swiperChange(event){
				//this.current = event.detail.current
			},
			answerTap(value,current) {
				if(!this.disabled)return false;
				if(this.answerlist[current]){
					return false;
				}
				this.disabled = false;
				this.answerlist[current] = value;
				if(current<11){
					this.current = current+1;
				}else{
					this.toLoading(this.answerlist)
				}
				this.$nextTick(()=>{
					setTimeout(()=>{
						this.disabled = true
					},1200)
				})
			},
			toLoading(answer){
				uni.redirectTo({
					url:'/pages/activeB/loading/index?answer='+answer
				});
			},
			stopTouchMove(){
				return false;
			}
		}
	}
</script>

<style lang="less" scoped>
.swiper{
	width: 100vw;
	height: 1500rpx;
	.swiper-item{
		width: 100%;
		height: 1500rpx;
		position: relative;
		.a1{
			position: absolute;
			width: 462rpx;
			top: 465rpx;
			left: 50rpx;
		}
		// .a1:hover{
		// 	top: 265rpx;
		// 	left: 50rpx;
		// 	background-image: url(/static/big/pic/1AL.png) 100% 100%;
		// }
		// .b1:hover{
		// 	background-image: url(/static/big/pic/1BL.png) 100% 100%;
		// }
		.b1{
			position: absolute;
			width: 557rpx;
			top: 717rpx;
			left: 114rpx;
		}
		.a2{
			position: absolute;
			width: 409rpx;
			top: 487rpx;
			left: 55rpx;
		}
		.b2{
			position: absolute;
			width: 463rpx;
			top: 826rpx;
			left: 223rpx;
		}
		.a3{
			position: absolute;
			width: 669rpx;
			top: 485rpx;
			left: 55rpx;
		}
		.b3{
			position: absolute;
			width: 656rpx;
			top: 880rpx;
			left: 23rpx;
		}
		.a4{
			position: absolute;
			width: 697rpx;
			top: 407rpx;
			left: 22rpx;
		}
		.b4{
			position: absolute;
			width: 540rpx;
			top: 739rpx;
			left: 150rpx;
		}
		.a5{
			position: absolute;
			width: 643rpx;
			top: 444rpx;
			left: 58rpx;
		}
		.b5{
			position: absolute;
			width: 654rpx;
			top: 763rpx;
			left: 62rpx;
		}
		.a6{
			position: absolute;
			width: 406rpx;
			top: 477rpx;
			left: 88rpx;
		}
		.b6{
			position: absolute;
			width: 401rpx;
			top: 883rpx;
			left: 260rpx;
		}
		.a7{
			position: absolute;
			width: 619rpx;
			top: 413rpx;
			left: 45rpx;
		}
		.b7{
			position: absolute;
			width: 626rpx;
			top: 745rpx;
			left: 52rpx;
		}
		.a8{
			position: absolute;
			width: 582rpx;
			top: 450rpx;
			left: 90rpx;
		}
		.b8{
			position: absolute;
			width: 629rpx;
			top: 800rpx;
			left: 66rpx;
		}
		.a9{
			position: absolute;
			width: 647rpx;
			top: 456rpx;
			left: 50rpx;
		}
		.b9{
			position: absolute;
			width: 645rpx;
			top: 800rpx;
			left: 64rpx;
		}
		.a10{
			position: absolute;
			width: 685rpx;
			top: 428rpx;
			left: 65rpx;
		}
		.b10{
			position: absolute;
			width: 617rpx;
			top: 805rpx;
			left: 52rpx;
		}
		.a11{
			position: absolute;
			width: 592rpx;
			top: 510rpx;
			left: 52rpx;
		}
		.b11{
			position: absolute;
			width: 604rpx;
			top: 850rpx;
			left: 115rpx;
		}
		.a12{
			position: absolute;
			width: 618rpx;
			top: 505rpx;
			left: 50rpx;
		}
		.b12{
			position: absolute;
			width: 600rpx;
			top: 843rpx;
			left: 86rpx;
		}
		.iwidth{
			position: absolute;
			z-index: -1;
			height: 100%;
		}
	}
}


</style>
